var UlListBoxMap = new Object();

var UlListBox = function(opt){
	this.target = opt.target?opt.target:'ulList';
	this.content = opt.content?opt.content:'pUlListBox';
	this.disNum = opt.disNum?opt.disNum:6;
	this.focusClass = opt.focusClass?opt.focusClass:'_curLi';
	this.normalClass = opt.normalClass?opt.normalClass:'_li';
	
	this.liStartLeft = opt.liStartLeft?opt.liStartLeft:-200;
	this.liItemWidth = opt.liItemWidth?opt.liItemWidth:200;
	this.onfocus = opt.onfocus?opt.onfocus:false;
	this.onblur = opt.onblur?opt.onblur:false;
	this.onclick = opt.onclick?opt.onclick:false;
	
	if( opt.formatHtml){
		this.formatHtml = opt.formatHtml;		//格式化
	}
	this.dataList = opt.dataList?opt.dataList:null;
	this.curItemId = 1;
	this.curFocusId = 1;
	this.curTopId = 0;
	
	UlListBoxMap[this.target] = this;
}

UlListBox.prototype = {
	setFocus:function(id){
		var a = false;
		if(id){
			a = document.getElementById(this.target+'-a-'+id);
		}else{
			a = document.getElementById(this.target+'-a-'+this.curFocusId);
		}
		if(a){
			a.focus();
		}
	},
	setDataList:function(dataList,onFocus){
		this.dataList = dataList;
		this.formatData();
		this.refreshContent();
		this.curItemId = 1;
		this.curFocusId = 1;
		if(onFocus){
			var a = document.getElementById(this.target+'-a-'+this.curFocusId);
			if(a){
				a.focus();
			}
		}
	},
	formatData:function(){
		var dataList = this.dataList;
		if(!dataList){
			dataList = new Array();
		}
		var length = dataList.length;
		while(dataList.length < (this.disNum+2)){
			for(var i=0;i<length;i++){
				dataList[dataList.length] = dataList[i];
			}
		}
	},
	
	refreshContent:function(){
		var con = '',i,data,a;
		var s = this.curItemId - 1;
		var e = s + this.disNum + 1;
		for(var i = s;i<= e;i++){
			j = i;
			if(j<1){
				j = j + this.dataList.length;
			}else if(j>this.dataList.length){
				j = j - this.dataList.length;
			}
			data = this.dataList[j - 1];
			con +='<div class="'+this.normalClass+'">'+this.formatHtml(data,j)+'</div>';
		}
		
		var liBox = document.getElementById(this.content);
		liBox.innerHTML = con;
		
		
		var aList = liBox.getElementsByTagName('a');
		var _this = this;
		for(var i =0;i<aList.length;i++){
			a = aList[i];
			a.onblur = this.blurItem;
			a.onfocus = this.focusItem;	
			a.onclick = this.clickItem;
		}
	},
	formatHtml:function(data,j){
		var con = '';
		con += '<div class="_liIcon" id="'+this.target+'-icon-'+j+'"><img src="'+data.image+'"/></div>';
		con += '<div class="_liText"><a href="#" id="'+this.target+'-a-'+j+'" tar="'+j+'">'+data.name+'</a></div>';
		return con;
	},
	
	blurItem:function(event){
		var a = event.currentTarget;
		var par = a.parentNode.parentNode;
		var id = a.id;
		var idArray = id.split('-');
		var _this = UlListBoxMap[idArray[0]];
		
		var tar = parseInt(a.getAttribute('tar'));
		par.className = _this.normalClass;
		
		if(_this.onblur){
			var data = _this.dataList[tar - 1];
			_this.onblur(data,tar);
		}
	},
	focusItem:function(event){
		var a = event.currentTarget;
		var par = a.parentNode.parentNode;
		var id = a.id;
		var idArray = id.split('-');
		var _this = UlListBoxMap[idArray[0]];
		
		var tar = parseInt(a.getAttribute('tar'));
		par.className = _this.focusClass;
		
		_this.curFocusId = tar;
		var next = par.nextSibling; 
		if(!next){			//如果不存在下一个节点
			_this.moveRight(parseInt(tar));
		}else{
			var prev = par.previousSibling;
			if(!prev){
				_this.moveLeft(parseInt(tar));
			}
		}
		if(_this.onfocus){
			var data = _this.dataList[tar - 1];
			_this.onfocus(data,tar,par);
		}
	},
	moveRight:function(tar){
		var liBox = document.getElementById(this.content);
		var childNodes = liBox.childNodes;
		
		stopAnimate(liBox, false,false);
		var n = tar + 1;
		if(n>this.dataList.length){
			n = 1;
		}
		liBox.removeChild(childNodes[0]);		//删除最后一个节点
		liBox.style.left = this.liStartLeft +  this.liItemWidth;
		
		
		var div = document.createElement('div');
		div.setAttribute('class',this.normalClass);
		div.innerHTML = this.formatHtml(this.dataList[n-1],n);
		liBox.appendChild(div);
		
		animate(liBox,{
			left:this.liStartLeft,
		},4);
		
		var a = document.getElementById(this.target+'-a-'+n);
		a.onblur = this.blurItem;
		a.onfocus = this.focusItem;	
		a.onclick = this.clickItem;
	},
	moveLeft:function(tar){
		var liBox = document.getElementById(this.content);
		var childNodes = liBox.childNodes;
		stopAnimate(liBox, false,false);
		var p = tar - 1;
		if(p < 1){
			p = this.dataList.length;
		}
		liBox.removeChild(childNodes[childNodes.length - 1]);		//删除最后一个节点
		
		var div = document.createElement('div');
		div.setAttribute('class',this.normalClass);
		div.innerHTML = this.formatHtml(this.dataList[p-1],p);
		liBox.insertBefore(div,childNodes[0]);
		liBox.style.left = this.liStartLeft -  this.liItemWidth;
		
		animate(liBox,{
			left:this.liStartLeft,
		},4);
		var a = document.getElementById(this.target+'-a-'+p);
		a.onblur = this.blurItem;
		a.onfocus = this.focusItem;	
		a.onclick = this.clickItem;
	},
	clickItem:function(event){
		var a = event.currentTarget;
		var par = a.parentNode.parentNode;
		var id = a.id;
		var idArray = id.split('-');
		var _this = UlListBoxMap[idArray[0]];
		
		var tar = parseInt(a.getAttribute('tar'));
		_this.curItemId = tar;
		if(_this.onclick){
			var data = _this.dataList[tar - 1];
			_this.onclick(data,tar);
		}
	}
}